<template>
  <div :class="iconBoxClass" @click="onClick">
    <a-icon :type="type" :theme="theme"/>
  </div>
</template>

<script>
export default {
  // 应用图标组件
  //o2ulDNOXGwvBRndehxW14dML+i/qxuVry2u3TXIhR9CrYEbhZi7RywQnYojV/SgC/PffdTE3WKU0/u0CXtgFzw==
  name: 'LowAppIcon',
  props: {
    type: String,
    backColor: String,
    size: {
      type: String,
      default: 'middle',
    },
    theme: {
      type: String,
      default: 'filled',
    },
  },
  computed: {
    iconBoxClass: {
      get() {
        let clazz = ['app-item-icon']
        // 图标背景颜色
        clazz.push(`back-color-${this.backColor}`)
        // 图标尺寸
        clazz.push(`size-${this.size}`)
        return clazz
      },
    }
  },
  methods: {
    onClick(event) {
      this.$emit('click', event)
    },
  },
}
</script>

<style lang="less" scoped>
/*@import '~@views/modules/low/style/low-app-icon.less';*/
.app-item-icon {
  color: white;
  text-align: center;
}

/* 图标默认、中等尺寸 */
.app-item-icon,
.app-item-icon.size-middle {
  width: 50px;
  height: 50px;
  font-size: 28px;
  line-height: 48px;
  border-radius: 12px;
}

/* 图标大号尺寸 */
.app-item-icon.size-large {
  width: 60px;
  height: 60px;
  font-size: 32px;
  line-height: 58px;
  border-radius: 14px;
}

/* 图标小号尺寸 */
.app-item-icon.size-small {
  width: 40px;
  height: 40px;
  font-size: 22px;
  line-height: 38px;
  border-radius: 10px;
}

/* 图标迷你尺寸 */
.app-item-icon.size-mini {
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  border-radius: 6px;
}

/* 图标背景颜色：矢车菊蓝（默认） */
.app-item-icon,
.app-item-icon.back-color-0 {
  background-image: linear-gradient(#bbcff3, #6495ed);
}

/*  图标背景颜色：极客蓝 */
.app-item-icon.back-color-1 {
  background-image: linear-gradient(#a0b3ff, #2F54EB);
}

/* 图标背景颜色：明青 */
.app-item-icon.back-color-2 {
  background-image: linear-gradient(#77fcfc, #13C2C2);
}

/*图标背景颜色：极光绿 */
.app-item-icon.back-color-3 {
  background-image: linear-gradient(#9bf46f, #52C41A);
}

/* 图标背景颜色：日暮 */
.app-item-icon.back-color-4 {
  background-image: linear-gradient(#ffd98f, #FAAD14);
}

/* 图标背景颜色：火山 */
.app-item-icon.back-color-5 {
  background-image: linear-gradient(#fe9c7b, #FA541C);
}

/* 图标背景颜色：薄暮 */
.app-item-icon.back-color-6 {
  background-image: linear-gradient(#ffa3a7, #F5222D);
}

/* 图标背景颜色：酱紫 */
.app-item-icon.back-color-7 {
  background-image: linear-gradient(#c29ff4, #722ED1);
}
</style>
